@use "sass:map";

.raid-picker-root {
	display: flex;
	flex-direction: column;

	.raid-controls,
	.new-player-picker-root,
	.parties-container {
		margin-bottom: $block-spacer * 2;
		display: grid;
		grid-gap: $block-spacer;
	}

	.raid-controls {
		grid-template-columns: repeat(5, 1fr);

		&> * {
			margin-bottom: 0;
		}
	}

	.new-player-picker-root {
		max-width: 960px;
		margin-bottom: $block-spacer * 2;
		grid-template-columns: repeat(5, 1fr);
	
		.class-presets-container {
			padding: map.get($spacers, 1) 0;
			border-radius: map.get($spacers, 1);
			display: flex;
			justify-content: space-evenly;
		}
	}

	.parties-container {
		grid-template-columns: repeat(4, 1fr);
		grid-row-gap: $block-spacer * 2;
	}
}

.party-picker-root {
	&:not(.active) {
		opacity: .5;
	}

	.party-header {
		display: flex;
		justify-content: space-between;

		.party-label {
			font-weight: bold;
			cursor: pointer;
		}
	}

	.players-container {
		display: grid;
		grid-gap: map.get($spacers, 1);
	}
}

.player-picker-root {
	.player-options {
		display: flex;
		align-items: center;

		&> :not(:last-child) {
			margin-right: map.get($spacers, 1);
		}
	}
}

.party-results {
	margin-bottom: map.get($spacers, 1);
	line-height: 1rem;
}

.party-results,
.player-results {
	display: flex;
	align-items: flex-end;
	font-size: $content-font-size;
}

.party-results-reference-delta,
.player-results-reference-delta {
	margin-left: map.get($spacers, 1);
	font-size: .75rem;
	line-height: .875rem;
}
